<template>
    <div class="hc-deliver-login">
        <div class="hc-deliver-login__left-block">
            <div class="hc-deliver-login__pic-container">
                <img alt="VIEW THE SUBMITTED FROM THE STUDENT" src="../assets/login/login_pic.png"/>
            </div>
        </div>
        <div class="hc-deliver-login__middle-block">
            <div class="hc-deliver-login__logo">
                <img src="../assets/logo.png" alt="三有果"/>
            </div>
            <div class="hc-deliver-login__input-area">
                <div class="hc-deliver-login__input-wrap">
                    <el-input
                            placeholder="请填写用户名"
                            v-model="name">
                        <i slot="prefix" class="iconfont icon-yonghu1"></i>
                    </el-input>
                </div>
                <div class="hc-deliver-login__input-wrap">
                    <el-input
                            placeholder="请填写密码" type="password"
                            v-model="password">
                        <i slot="prefix" class="iconfont icon-mima1"></i>
                    </el-input>
                </div>
                <div class="hc-deliver-login__input-wrap hc-deliver-login__input-wrap--left">
                    <el-checkbox v-model="rememberPass" @change="(value)=>{if(!value)this.autoLogin=false;}">记住密码
                    </el-checkbox>
                </div>
                <div class="hc-deliver-login__input-wrap hc-deliver-login__input-wrap--left">
                    <el-checkbox v-model="autoLogin" @change="(value)=>{if(value)this.rememberPass=true;}">自动登录
                    </el-checkbox>
                </div>
            </div>
            <div class="hc-deliver-login__input-wrap">
                <el-button type="primary" class="hc-deliver-login__button hc-deliver-login__button--login"
                           @click="login">登录
                </el-button>
            </div>
        </div>
        <div class="hc-deliver-login__right-block"></div>
    </div>
</template>

<script>
    const path = require('path');
    import {NetUtil} from '../utils/NetUtil.js'
    import {ConstJsonManager} from '../utils/ConstJsonManager'
    import {mutations_const} from '../config/StoreConstant'
    import {URL} from '../config/UrlConfig.js'
    const remote = require('electron').remote;

    export default {
        name: 'login',
        data() {
            return {
                name: '',
                password: '',
                rememberPass: true,
                autoLogin: true,
                eventId: 0,
                isToShow: true
            }
        },
        methods: {

            login() {
                if (window.navigator.onLine === false) {
                    remote.getCurrentWindow().show();
                    this.$alert('无网络连接！');
                    return;
                }
                if (!this.name || !this.password) {
                    remote.getCurrentWindow().show();
                    this.$alert('请填写用户名或者密码！');
                    return
                }

                NetUtil.post(URL.System.login, {username: this.name, password: this.password, type: 6})
                    .then(res => {
                        ConstJsonManager.set('rememberPass', this.rememberPass);
                        ConstJsonManager.set('autoLogin', this.autoLogin);
                        ConstJsonManager.set('name', this.name);
                        ConstJsonManager.set('password', this.password);
                        ConstJsonManager.set('token', res.token)
                            .then(() => {
                                NetUtil.updToken()
                                    .then(() => {
                                        clearTimeout(this.eventId);
                                        this.$router.push({path: '/selectSubject'})
                                    })
                            })
                    })
                    .catch(err => {
                        clearTimeout(this.eventId);
                        remote.getCurrentWindow().show();
                    })
            },
            keyUp(e) {
                if (e.code === 'Enter' && !(!this.name || !this.password)) {
                    this.login();
                }
            },
            onlineEvent(){
                window.removeEventListener('online',  this.onlineEvent);
                clearTimeout(this.eventId);
                setTimeout(()=>{
                    if(this.isToShow===true) return;
                    this.login();
                }, 4000);
            }
        },
        created() {
            this.eventId = setTimeout(()=>{
                window.removeEventListener('online',  this.onlineEvent);
                remote.getCurrentWindow().show();
                this.login();
            }, 60000);
            window.addEventListener('online',  this.onlineEvent);
            remote.process.argv.forEach((value) => {
                if (value.indexOf('-donotshow') !== -1) this.isToShow = false;
            });
            if (this.isToShow === true) {
                clearTimeout(this.eventId);
                window.removeEventListener('online',  this.onlineEvent);
                remote.getCurrentWindow().show();
            }

            this.$store.commit(mutations_const.RESET_LOGIN_MEMBER, {});
            Promise.all([ConstJsonManager.get('rememberPass'), ConstJsonManager.get('password'), ConstJsonManager.get('name'), ConstJsonManager.get('autoLogin')])
                .then(res => {
                    if (res[0]) {
                        this.autoLogin = res[3];
                        this.name = res[2];
                        this.password = res[1];
                        this.rememberPass = res[0];
                        if (res[3] && res[2] && res[1] && res[2] !== '' && res[1] !== '' && (this.isToShow === true || navigator.onLine)) {
                            this.login();
                        }
                    } else if (res[2]) {
                        remote.getCurrentWindow().show();
                        this.name = res[2];
                    } else {

                        remote.getCurrentWindow().show();
                    }
                })
        },
        mounted() {
            document.body.addEventListener('keyup', this.keyUp);
        },
        beforeRouteLeave(to, from, next) {
            document.body.removeEventListener('keyup', this.keyUp);
            window.removeEventListener('online',  this.onlineEvent);
            next();
        }
    }
</script>

<style scoped>

</style>
